<template>
  <page-main>
    <div class="page-module">
      <!-- <date-range :start.sync="form.start" :end.sync="form.end" /> -->
      <van-form >
        <van-field
          required
          label="时间区间"
          input-align="right"
        >
          <div slot="input">
            <span @click="showDate('start')">{{form.start}}</span>
            ~
            <span @click="showDate('end')">{{form.end}}</span>
          </div>
        </van-field>
      </van-form>  
    </div>
    <van-popup v-model="date_range.show" position="bottom" >
      <van-datetime-picker
        v-model="date_range.currentDate"
        type="date"
        title="选择年月日"
        :min-date="date_range.minDate"
        :max-date="date_range.maxDate"
        @cancel="date_range.show = false"
        @confirm="getDate"
      />
    </van-popup>
  </page-main>
</template>

<script>
// import DateRange from '@/components/DateRange';
export default {
  data() {
    return {
      form:{
        start: '2021-05-11',
        end: '2021-05-21',
      },
      date_range:{
        show: false,
        type: null,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      }
    };
  },
  components:{
    // DateRange
  },
  methods: {
    showDate(type){
      this.date_range.type = type;
      this.date_range.currentDate = new Date(this.form[type]);
      this.date_range.show = true;
    },
    getDate(value){
      console.log(this.formatDate(value));
      this.form[this.date_range.type] = this.formatDate(value);
      this.date_range.show = false;
    },
    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = Number(month) < 10 ? "0" + month : month;
      day = Number(day) < 10 ? "0" + day : day;
      return year + "-" + month + "-" + day;
    },
  },
};
</script>